<script setup>
import { ref, watchPostEffect } from "vue"
import { useNavStore } from "@/store/nav"
import { useIndexStore } from "@/store/index"
import { useRouter } from "vue-router"

const router = useRouter()
const navStore = useNavStore()
const indexStore = useIndexStore()

const change = (data) => {
	navStore.setNavSelectMenu({
		[indexStore.indexState.header_nav_bar_active]: data.id,
	})
	router.push({ name: data.toName })
	indexStore.setHeader_nav_list(data.toName)
}
</script>
<template>
	<div class="my-nav">
		<ul class="menu-list">
			<li
				v-for="item in navStore.menu_obj[
					indexStore.indexState.header_nav_bar_active
				]"
				:key="item.id"
				class="my-nav-item">
				<div class="my-nav-item-group">
					<div class="title">{{ item.title }}</div>
					<ul>
						<li
							class="my-nav-item-group-item"
							v-for="data in item.list"
							:key="data.id"
							@click="change(data)"
							:class="
								navStore.nav_select_menu[
									indexStore.indexState.header_nav_bar_active
								] == data.id
									? 'active'
									: ''
							">
							{{ data.label }}
						</li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
</template>
<style scoped lang="scss">
/* 改变滚动条样式 */
::-webkit-scrollbar {
	width: 0px;
	height: 0px;
}
.my-nav {
	width: inherit;
	flex: 1;
	padding: 40px 60px 40px 20px;
	.menu-list {
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		.my-nav-item {
			color: $all-color;
			.my-nav-item-group {
				.title {
					height: 60px;
					font-size: 30px;
					margin: 10px 40px;
					padding: 10px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
				.my-nav-item-group-item {
					display: flex;
					height: 50px;
					margin: 10px 40px;
					padding: 10px;
					justify-content: flex-start;
					align-items: center;
					font-size: 20px;
					transition: all $animation-duration-05;
					border-radius: 10px;

					&:hover {
						color: $nav_menu_hover_colr;
						animation: swing $animation-duration-5
							$animation-ease-linear !important;
					}
				}
				&:hover .active {
					animation: none;
				}
				.active {
					background-color: $nav_menu_active_bg_color;
					color: $nav_menu_active_color;
					animation: jello $animation-duration-4
						$animation-ease-linear;
				}
			}
		}
		&:hover::-webkit-scrollbar {
			width: 4px;
			height: 4px;
		}
	}
}
</style>
